<template>
   <div>
           <Drawer title="编辑用户" v-model="drawer" width="720" :mask-closable="false" :styles="styles">
            <Form :model="formData" label-position="top">
                <Row :gutter="32">
                    <Col span="8">
                        <FormItem label="姓名">
                            <Input v-model="formData.name" />
                        </FormItem>
                    </Col>
                   <Col span="8">
                        <FormItem label="手机号">
                            <Input v-model="formData.phone"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="微信号">
                            <Input v-model="formData.wx"></Input>
                        </FormItem>
                    </Col>
                    <Divider orientation="left" class="u-tit">病情信息</Divider>
                    <Col span="8">
                        <FormItem label="效果类型">
                            <Select v-model="formData.Effect" clearable>
                                <Option value="扩散">扩散</Option>
                                <Option value="无效">无效</Option>
                                <Option value="见效-10%">见效-10%</Option>
                                <Option value="扩散">扩散</Option>
                                <Option value="无效">无效</Option>
                                <Option value="见效-10%">见效-10%</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="16">
                        <FormItem label="部位">
                            <Select v-model="formData.consultant" filterable multiple>
                                <Option
                                    v-for="item in contlist"
                                    :value="item.value"
                                    :key="item.value"
                                >{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="16">
                        <FormItem label="患者标签">
                            <Select v-model="formData.tag" filterable multiple>
                                <Option
                                    v-for="item in labelList"
                                    :value="item.value"
                                    :key="item.value"
                                >{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="风控类型">
                            <Select v-model="formData.risk" clearable>
                                <Option value="敏感">敏感</Option>
                                <Option value="正常">正常</Option>
                                <Option value="黑名单">黑名单</Option>
                                <Option value="领导介绍">领导介绍</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="诊室">
                            <Select v-model="formData.room">
                                <Option value="1诊">1诊</Option>
                                <Option value="2诊">2诊</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="归属人">
                            <Select v-model="formData.personnel">
                                <Option value="高玲">高玲</Option>
                                <Option value="王艳">王艳</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="16">
                        <FormItem label="病种">
                            <Row :gutter="32">
                                <i-Col span="12">
                                <Select v-model="formData.disease"  placeholder="一级病种">
                                <Option value="白癜风">白癜风</Option>
                                <Option value="皮杂">皮杂</Option>
                            </Select>
                                </i-Col>
                                <i-Col span="12">
                                <Select v-model="formData.diseaseChildren" placeholder="二级病种">
                                <Option value="白斑">白斑</Option>
                                <Option value="皮炎">皮炎</Option>
                            </Select>
                            </i-Col>
                            </Row>
                        </FormItem>
                    </Col>
                    <!-- <Col span="8">
                        <FormItem label="就诊类型">
                            <Select v-model="formData.state" disabled >
                                <Option value="正常">正常</Option>
                                <Option value="待跟踪">待跟踪</Option>
                                <Option value="维护中">维护中</Option>
                            </Select>
                        </FormItem>
                    </Col> -->
                    <Divider orientation="left" class="u-tit">完善信息</Divider>
                    <Col span="8">
                        <FormItem label="生日">
                            <DatePicker type="date" placeholder="用户生日"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="年龄">
                            <InputNumber :max="150" :min="1" v-model="formData.age"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="职业">
                            <Input v-model="formData.Occupation"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="性别">
                            <RadioGroup>
                                <Radio label="男"></Radio>
                                <Radio label="女"></Radio>
                                <Radio label="不详"></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="奕远渠道">
                            <Select v-model="formData.channel">
                                <Option value="private">抖音</Option>
                                <Option value="public">百度</Option>
                                <Option value="public">微信</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    </Row>
                    <Row :gutter="32">
                    <Col span="8">
                        <FormItem label="城市">
                            <Select v-model="city" filterable>
                                <Option
                                    v-for="item in cityList"
                                    :value="item.value"
                                    :key="item.value"
                                >{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="16">
                        <FormItem label="详细地址">
                            <Input v-model="formData.address"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="handleDrawerCancel">取消</Button>
                <Button type="primary" @click="handleDrawer">保存</Button>
            </div>
        </Drawer>
        </div>
</template>
<script>
    export default {
        name: 'DetailEdit',
        data () {
            return {
                drawer: false,
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },
                formItem: {
                    input: '',
                    select: '',
                    radio: '未接通',
                    radios: '微信',
                    checkbox: [],
                    date: '',
                    date1: '',
                    time: '',
                    diseaseChildren: '',
                    desc: '',
                    textarea: ''
                },
                labelList: [
                    {
                        value: '在乎费用',
                        label: '在乎费用'
                    },
                    {
                        value: '治疗效果',
                        label: '治疗效果'
                    },
                    {
                        value: '路程远',
                        label: '路程远'
                    }
                ],
                cityList: [
                    {
                        value: '合肥',
                        label: '合肥'
                    },
                    {
                        value: '武汉',
                        label: '武汉'
                    },
                    {
                        value: '苏州',
                        label: '苏州'
                    }
                ],
                contlist: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '手部',
                        label: '手部'
                    },
                    {
                        value: '脸部',
                        label: '脸部'
                    }
                ],
                model11: '',
                city: '',
                labelPosition: 'left',
                formData: {
                    personnel: [],
                    Occupation: ''
                }
            };
        },
        methods: {
            handleOpenDrawer () {
                this.drawer = true;
            },
            handleDrawerCancel () {
                this.drawer = false;
            },
            handleDrawer () {
                this.$Message.success('编辑成功');
                this.drawer = false;
            }
        }
    }
</script>
<style scoped>
    .u-tit {
        font-size:14px;
        font-weight:bold;
        color:#333;
    }
</style>
